<template>
  <div class="feedback">
    <Divider v-if="showTitle" />
    <h3 v-if="showTitle">反馈详情</h3>
    <div class="mt-10">
      <Timeline>
        <TimelineItem v-for="(it,i) in feedbackDetailVoList" :key="i">
          <div class="round-dot" :class="{on:!i}" slot="dot"></div>
          <div class="info-box">
            <Row justify="space-between" align="middle">
              <div class="title" :class="{on:!i}">
                <span>{{ it.feedbackDate }}</span>
                <span>{{ it.feedbackPhaseName }}</span>
                <span>经营人员: {{ it.busiPersonName || '--' }}</span>
              </div>
              <div v-if="receiveStatus === 'Receive' && feedbackEndDate && !i">
                <span>反馈倒计时</span>
                <Countdown :time="feedbackEndDate" />
              </div>
            </Row>

            <div class="orange">反馈内容: {{ it.content }}</div>
            <div>产业标记: {{ it.industryMarkName }}</div>
            <div class="file-box" v-if="it.fileVoList && it.fileVoList.length">
              <p class="file-label">文件列表:</p>
              <p>
                <UploadFiles v-model="it.fileVoList" disabled />
              </p>
            </div>
          </div>
          <div v-if="it.deriveBusiInfoList && it.deriveBusiInfoList.length" class="derivative-info">
            <div class="derivative-label">派生信息:</div>
            <div class="derivative-tabel">
              <Table :columns="columns" :data="it.deriveBusiInfoList">
                <template slot="deriveBusiInfoList">
                  <BtnPlain type="primary">派生信息</BtnPlain>
                </template>
              </Table>
            </div>
          </div>
        </TimelineItem>
      </Timeline>
    </div>
  </div>
</template>

<script>
import Countdown from './countdown.vue'
import UploadFiles from '@/pages/components/uploadFiles/index.vue'

export default {
  name: 'feedback',
  components: { Countdown, UploadFiles },
  props: {
    feedbackDetailVoList: {
      type: Array,
      default: () => []
    },
    showTitle: {
      type: Boolean,
      default: false
    },
    receiveStatus: {
      type: String,
      default: 'UnReceive'
    },
    // 反馈倒计时
    feedbackEndDate: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      columns: [
        {
          title: '项目名称',
          key: 'projectName',
          minWidth: 160,
          tooltip: true
        },
        {
          title: '省份',
          key: 'province',
          minWidth: 120,
        },
        {
          title: '城市',
          key: 'city',
          minWidth: 120,
        },
        {
          title: '产业标记',
          key: 'industryAssign',
          minWidth: 160,
          tooltip: true
        },
        {
          title: '预计产值规模(万元)',
          key: 'outputScale',
          minWidth: 160,
        },
        {
          title: '信息类型',
          slot: 'deriveBusiInfoList',
          minWidth: 160,
        },
      ],
      listData: []
    }
  }
}
</script>

<style lang='less' scoped>
.mt-10 {
  margin-top: 10px;
}

.orange {
  color: orange;
}
.feedback {
  .info-box {
    line-height: 26px;
    .title {
      color: #7b8591;
      &.on {
        color: #2d8cf0;
      }
      > span {
        margin-right: 20px;
      }
    }
  }

  .derivative-info {
    display: flex;
    margin-top: 5px;
  }

  .derivative-label {
    width: 100px;
  }

  .derivative-tabel {
    width: 100%;
  }
}
.round-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1.5px solid #2d8cf0;
  border-radius: 50%;
  opacity: 0.7;
  &.on {
    opacity: 1;
    background-color: #2d8cf0;
  }
}

.file-box {
  position: relative;
  margin-top: -7px;
}
.file-label {
  position: absolute;
  top: 2px;
}
</style>

<style lang="less">
.feedback {
  .ivu-timeline-item {
    padding: 0;
  }
  .ivu-timeline-item-head-custom {
    padding: 0;
  }

  .ivu-timeline-item-tail {
    opacity: 0.7;
    border-left: 2px solid #2d8cf0;
  }
}
</style>
